<template>
  <div class="zhekou-box">
    <div class="label">折扣(100折):</div>
    <el-input type="text" class="zhekou" placeholder="请输入折扣" size="large" v-model="zhekou"> </el-input>
    <el-button type="primary" @click="confirmFun" size="large">确认</el-button>
  </div>
</template>
<script setup>
import { ref, watch } from 'vue'
import { shujizhekou } from '@api/zhekou'
import { ElMessage, ElMessageBox } from 'element-plus'

const props = defineProps({
  status: {
    type: String,
    default: '-1'
  },
  callback: {
    type: Function,
    default: () => { }
  }
})

const zhekou = ref('')

// 获取折扣
const getZhekou = async (zhekouOpt) => {
  return new Promise(async (resolve, reject) => {
    let res = await shujizhekou({ status: props.status, zhekou: zhekouOpt })
    if (res.code == 200) {
      if (zhekouOpt) {
        ElMessage({
          message: '操作成功!',
          type: 'success'
        })
        resolve(true)
      } else {
        zhekou.value = res.data
      }
    }
  })
}

//设置折扣
const confirmFun = async () => {
  let patt = /^[+]?(0|([1-9]\d*))(\.\d+)?$/g
  if (patt.test(zhekou.value)) {

    ElMessageBox.confirm('确定设置折扣吗?')
      .then(async () => {
        let res = await getZhekou(zhekou.value)
        props.callback()
      })
      .catch(() => { })

  } else {
    ElMessage({
      message: '请输入数字!',
      type: 'error'
    })
  }

}

watch(
  props.status,
  (newValue, oldValue) => {
    getZhekou('')
  },
  { immediate: true }
)
</script>
<style lang="scss">
.zhekou-box {
  @include flex();

  .label {
    width: 90px;
    margin-right: 10px;
    font-size: 14px;
  }

  .zhekou {
    margin-right: 20px;
    width: 150px;
  }
}
</style>
